<template>
  <div class="home">
    <div class="content">
      <div class="video-box">
        <div :class="['video-window', activeVideo === 1 ? 'active-video' : '']">
          <div class="a-border"></div>
          <div class="video-name">设备1</div>
          <div id="example_video_1" ref="videoRef1" class="video-js vjs-default-skin"></div>
        </div>
        <div :class="['video-window', activeVideo === 2 ? 'active-video' : '']">
          <div class="video-name">设备2</div>
          <template>
            <div id="f_ocx" @click="handleVideo(2)"></div>
          </template>
        </div>
        <div :class="['video-window', activeVideo === 3 ? 'active-video' : '']">
          <div class="video-name">设备3（已离线）</div>
          <img class="screen-icon" src="@/assets/img/Screen.png" alt="">
        </div>
        <div :class="['video-window', activeVideo === 4 ? 'active-video' : '']">
          <div class="video-name">设备4（已离线）</div>
          <img class="screen-icon" src="@/assets/img/Screen.png" alt="">
        </div>
      </div>
      <div class="video-control">
        <div class="control-content">
          <div class="control-settings">
            <span class="equipment-name">PTZ</span>
            <div class="setting-button">
              <img class="setting-btn" src="@/assets/img/shezhi.png" alt />
              <img class="close-btn" src="@/assets/img/close.png" alt />
            </div>
          </div>
          <div class="main-control">
            <div
              class="control-btn control-dian"
              @mousedown="operatiMusedown(5)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-dian" src="@/assets/img/dian.png" alt />
            </div>
            <div
              class="control-btn control-triangle"
              @mousedown="operatiMusedown(1)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-triangle" src="@/assets/img/sanjiao.png" alt />
            </div>

            <div
              class="control-btn control-dian"
              @mousedown="operatiMusedown(7)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-dian" src="@/assets/img/dian.png" alt />
            </div>
            <div
              class="control-btn control-triangle"
              @mousedown="operatiMusedown(3)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-triangle" src="@/assets/img/sanjiao.png" alt />
            </div>

            <div class="control-btn control-refresh" @click="operatiMusedown(9)">
              <img class="icon-refresh" src="@/assets/img/shuaxin.png" alt />
            </div>

            <div
              class="control-btn control-triangle"
              @mousedown="operatiMusedown(4)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-triangle" src="@/assets/img/sanjiao.png" alt />
            </div>

            <div
              class="control-btn control-dian"
              @mousedown="operatiMusedown(6)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-dian" src="@/assets/img/dian.png" alt />
            </div>
            <div
              class="control-btn control-triangle"
              @mousedown="operatiMusedown(2)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-triangle" src="@/assets/img/sanjiao.png" alt />
            </div>

            <div
              class="control-btn control-dian"
              @mousedown="operatiMusedown(8)"
              @mouseup="operatiMouseup()"
            >
              <img class="icon-dian" src="@/assets/img/dian.png" alt />
            </div>
          </div>
          <div class="slider-content">
            <span class="slider-text">慢</span>
            <div class="slider">
              <el-slider v-model="iPTZSpeed" :max="7" :min="1"></el-slider>
            </div>
            <span class="slider-text">快</span>
          </div>
          <div class="capsule-content">
            <div class="capsule-btn capsule-1">
              <div
                class="c-button c-left"
                @mousedown="effectsMusedown(4)"
                @mouseup="effectsMouseup(4)"
              >
                <img src="@/assets/img/jia.png" alt />
              </div>
              <div
                class="c-button c-right"
                @mousedown="effectsMusedown(5)"
                @mouseup="effectsMouseup(5)"
              >
                <img src="@/assets/img/jian.png" alt />
              </div>
            </div>
            <div class="capsule-btn capsule-2">
              <div
                class="c-button c-left"
                @mousedown="effectsMusedown(6)"
                @mouseup="effectsMouseup(6)"
              >
                <img src="@/assets/img/icon-1.png" alt />
              </div>
              <div
                class="c-button c-right"
                @mousedown="effectsMusedown(7)"
                @mouseup="effectsMouseup(7)"
              >
                <img src="@/assets/img/icon-2.png" alt />
              </div>
            </div>
            <div class="capsule-btn capsule-3">
              <div
                class="c-button c-left"
                @mousedown="effectsMusedown(8)"
                @mouseup="effectsMouseup(8)"
              >
                <img src="@/assets/img/icon-3.png" alt />
              </div>
              <div
                class="c-button c-right"
                @mousedown="effectsMusedown(9)"
                @mouseup="effectsMouseup(9)"
              >
                <img src="@/assets/img/icon-4.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="info-list">
          <div class="list-bar">
            <div @click="shebei1(0)" :class="['bar', !activeListBar && 'active-list-bar']">设备名称</div>
            <div @click="shebei1(1)" :class="['bar', activeListBar && 'active-list-bar']">算法</div>
          </div>
          <div v-if="!activeListBar" class="list-content pt-20">
            <div
              @click="handleVideo(i)"
              :class="[
                'list-item',
                activeVideo === i ? 'active-list-item' : '',
              ]"
              v-for="i in 4"
              :key="i"
            >
              <div class="item-title">设备{{ i > 2 ? i + "(已离线)" : i }}</div>
              <div class="operation-box">
                <div class="operation-button">
                  <img v-if="activeVideo === i" src="@/assets/img/qizi.png" alt />
                  <img v-else src="@/assets/img/qizi-d.png" alt />
                </div>
                <div class="operation-button delete-button">
                  <img v-if="activeVideo === i" src="@/assets/img/shanchu.png" alt />
                  <img v-else src="@/assets/img/shanchu-d.png" alt />
                </div>
              </div>
            </div>
          </div>
          <div v-else class="list-content">
            <!-- <vue-seamless-scroll
              :data="algorithmList"
              :class-option="defaultOption"
            >-->
            <div v-for="(item, i) in algorithmList" :key="i" class="list-item1">
              <div class="list-top">
                <div class="item-title">时间：{{ item.timestamp }}</div>
                <div class="item-title">设备：{{ item.name }}</div>
              </div>
              <div class="list-bom">
                <div class="item-title">类型：{{ item.type }}</div>
                <div class="item-title">IP：{{ item.ip }}</div>
              </div>
            </div>

            <!-- </vue-seamless-scroll> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import videojs from "video.js";
import "videojs-contrib-hls";
// import vueSeamlessScroll from "vue-seamless-scroll";
import dayjs from 'dayjs'
// 键位映射
const KEY_MAP = {
  // 方向key
  1: 0,
  2: 1,
  3: 2,
  4: 3,
  5: 32,
  6: 34,
  7: 33,
  8: 35,
  9: 3,

  // 变焦key
};

const ALGORITHM_LIST = [
  {
    timestamp: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
    ip: "192.168.10.11",
    name: "D1",
    type: "移动侦测",
  },
  {
    timestamp: "2021-08-29 12:32:55",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-28 16:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-26 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-09-02 22:09:21",
    ip: "192.168.10.11",
    name: "D1",
    type: "移动侦测",
  },
  {
    timestamp: "2021-08-23 11:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-21 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-08-20 16:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-27 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-09-02 17:09:21",
    ip: "192.168.10.11",
    name: "D1",
    type: "移动侦测",
  },
  {
    timestamp: "2021-08-28 16:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-26 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-09-02 22:09:21",
    ip: "192.168.10.11",
    name: "D1",
    type: "移动侦测",
  },
  {
    timestamp: "2021-08-23 11:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-21 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-08-20 16:30:28",
    ip: "192.168.10.11",
    name: "D1",
    type: "越界侦测（穿越警戒面）",
  },
  {
    timestamp: "2021-08-27 19:15:24",
    ip: "192.168.10.11",
    name: "D1",
    type: "区域入侵侦测",
  },
  {
    timestamp: "2021-09-02 17:09:21",
    ip: "192.168.10.11",
    name: "D1",
    type: "移动侦测",
  },
];

export default {
  components: {
    // vueSeamlessScroll,
  },
  name: "home",
  data () {
    return {
      DdHuaIsRuned: undefined,
      videoPlayerOne: null,
      videoPlayerTwo: null,
      videoPlayerThree: null,
      videoPlayerFour: null,
      activeVideo: 1,
      activeMenu: 1,
      activeListBar: 0,
      activeItem: 1,
      iPTZSpeed: 4, // 海康云台速度
      mainOcxHtml: null,
      g_ocx: null,
      handlerOcxEvents: null,
      isAutoRun: false,
      lastNum: 0,
      menuData: [
        {
          id: 1,
          text: "预览",
          icon: require("@/assets/img/shexiangtou.png"),
        },
        {
          id: 2,
          text: "回放",
          icon: require("@/assets/img/replay.png"),
        },
        {
          id: 3,
          text: "检索",
          icon: require("@/assets/img/caidan.png"),
        },
        {
          id: 4,
          text: "配置",
          icon: require("@/assets/img/shezhi.png"),
        },
      ],
      algorithmList: ALGORITHM_LIST,
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption () {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted () {
    this.mainOcxHtml =
      '<object id="ocx" width="100%" height="100%" type="application/media-plugin-version-3.1.0.2" VideoWindTextColor="9c9c9c" VideoWindBarColor="414141"></object>';
    var hasPlugin = this.checkPlugins();

    // 监听
    this.handlerOcxEvents = {
      fireOcxEvent: function (jsonStr) {
        document.getElementById("downPos").value = jsonStr;
      },
    };
    // 判断浏览器
    if (!hasPlugin) {
    } else {
      this.loadPageOcx();
    }
    this.$MyVideo.init(
      this.$refs.videoRef1.clientWidth,
      this.$refs.videoRef1.clientHeight
    );
  },
  async beforeRouteLeave (to, form, next) {
    try {
      await this.$MyVideo.clickStopRealPlay();
    } catch (error) {
      console.log("error ->", error);
      setTimeout(() => location.reload(), 500);
    }
    next();
  },
  methods: {
    shebei1 (nbm1) {
      this.activeListBar = nbm1;
    },
    shebei2 (value, nbm2) {
      this.suanfa = value;
      this.activeListBar = nbm2;
    },
    //down事件
    operatiMusedown (type) {
      if (this.activeVideo == 1) {
        this.$MyVideo.mouseDownPTZControl(type, this.iPTZSpeed);
      } else {
        try {
          if (type === 9 && this.isAutoRun) {
            this.operatiMouseup();
            this.isAutoRun = false;
          } else {
            this.ControlPtz(0, KEY_MAP[type], 1, this.iPTZSpeed, 1, 0);
            this.isAutoRun = type === 9;
          }
        } catch (error) {
          console.log("Error ->", error);
        }
      }
      this.lastNum = type;
    },
    //up事件
    operatiMouseup () {
      if (this.activeVideo == 1) {
        this.$MyVideo.mouseUpPTZControl();
      } else {
        this.ControlPtz(0, 1, 1, 1, 1, 1);
      }
    },
    // 变焦类型down
    effectsMusedown (type) {
      const EVENT_KEY_MAP = {
        4: this.$MyVideo.PTZZoomIn,
        5: this.$MyVideo.PTZZoomout,
        6: this.$MyVideo.PTZFocusIn,
        7: this.$MyVideo.PTZFoucusOut,
        8: this.$MyVideo.PTZIrisIn,
        9: this.$MyVideo.PTZIrisOut,
      };
      if (this.activeVideo == 1) {
        EVENT_KEY_MAP[type].call(this);
      } else {
        this.ControlPtz(0, type, 1, 1, 1, 0);
      }
    },
    effectsMouseup (type) {
      if (this.activeVideo == 1) {
        if ([4, 5].includes(type)) {
          this.$MyVideo.PTZZoomStop();
        }
        if ([6, 7].includes(type)) {
          this.$MyVideo.PTZFoucusStop();
        }
        if ([8, 9].includes(type)) {
          this.$MyVideo.PTZIrisStop();
        }
      } else {
        this.operatiMouseup();
      }
    },
    //切换
    handleVideo (num) {
      if (num > 2) {
        return;
      } else {
        const activeVideo = this.activeVideo;
        if (num !== activeVideo) {
          this.operatiMouseup();
        }
        this.activeVideo = num;
      }
    },
    checkPlugins () {
      var result;
      navigator.plugins.refresh(false);
      result = navigator.mimeTypes["application/media-plugin-version-3.1.0.2"];
      return !!(result && result.enabledPlugin);
    },

    // 元素赋值
    loadPageOcx () {
      document.getElementById("f_ocx").innerHTML = this.mainOcxHtml;
      this.initPageOcx();
    },

    // 绑定元素
    initPageOcx () {
      this.g_ocx = document.getElementById("ocx");
      // 监听加载
      this.g_ocx.AddEventListener(
        "TransEvent",
        this.handlerOcxEvents.fireOcxEvent
      );
      this.LoginDevice();
      setTimeout(this.RealPlay, 1000);
    },

    // 开始阅览
    RealPlay () {
      this.g_ocx.SetModuleMode(0); //监视模式
      this.g_ocx.ConnectRealVideo(0, 1);
    },

    // 控制云台
    // q,
    // w,
    // e,
    // r:速度
    // t,
    // y
    ControlPtz (q, w, e, r, t, y) {
      // 处理关闭状态， 用 y 判断是否为关闭状态
      if (y && !this.DdHuaIsRuned) {
        return;
      }
      console.log("arguments ->", arguments);
      this.DdHuaIsRuned = !y;
      this.g_ocx.ControlPtzEx(q, w, e, r, t, y);
    },

    // 登录
    LoginDevice () {
      var bRet = this.g_ocx.LoginDeviceEx(
        "192.168.10.205",
        37777,
        "admin",
        "abc123456",
        0
      );
      this.g_ocx.SetWinBindedChannel(1, 0, 1, 1);
    },
  },
};
</script>

<style scoped lang="less">
.home {
  width: 100%;
  /*overflow: hidden;*/
  background-color: #313039;
  font-size: 0;

  .video-js {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .nav-bar {
    width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bar-left {
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .logo {
        width: 1.8rem;
        margin-left: 0.38rem;

        > img {
          width: 100%;
        }
      }

      .bar-menu {
        margin-left: 0.78rem;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .menu-item {
          width: 1.07rem;
          height: 100%;
          margin-right: 1.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 0.02rem solid rgba(2, 2, 2, 0);
          box-sizing: border-box;
          cursor: pointer;

          .menu-icon {
            height: 0.38rem;
          }

          > span {
            font-size: 0.2rem;
            color: #817f8b;
          }
        }

        .active-menu {
          border-bottom: 0.02rem solid #ffffff;

          > span {
            color: #fff;
          }
        }
      }
    }

    .bar-right {
      height: 100%;
      margin-right: 0.2rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      > img {
        width: 0.23rem;
        height: 0.23rem;
        margin-left: 0.4rem;
        cursor: pointer;
      }
    }
  }

  .content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: calc(100vh - 0.8rem);
    overflow: hidden;
    .video-box {
      width: calc(100vw - 3.6rem);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      height: 100%;
      position: relative;
      overflow: hidden;
      .video-window {
        z-index: 999999;
        width: 50%;
        height: 50%;
        position: relative;
        border: 0.01rem solid rgba(2, 2, 2, 1);
        box-sizing: border-box;
        cursor: pointer;
        background-color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        .a-border {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 0.02rem solid rgb(0, 0, 0);
          z-index: 99;
        }
        .video-name {
          position: absolute;
          top: 0.2rem;
          left: 0.2rem;
          font-size: 0.2rem;
          color: #fff;
          z-index: 999999;
          background-color: #313039;
        }
        .video-mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0rem;
          left: 0rem;
          font-size: 0.2rem;
          z-index: 999999;
          opacity: 0.001;
        }
        #f_ocx {
          position: absolute;
          z-index: 1;
          width: 99%;
          height: 99%;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .active-video {
        border: 0.01rem solid #791818;
      }
    }

    .video-control {
      width: 3.6rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      flex-shrink: 0;
      box-sizing: border-box;
      border-top: 0.01rem solid #474748;
      margin-top: 0.01rem;

      .control-content {
        width: 100%;
        height: 4.2rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0 0.2rem;
        box-sizing: border-box;
        flex-shrink: 0;

        .control-settings {
          width: 100%;
          height: 0.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .equipment-name {
            font-size: 0.2rem;
            color: #817f8b;
          }

          .setting-button {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            > img {
              width: 0.2rem;
              height: 0.2rem;
            }

            .close-btn {
              width: 0.15rem;
              height: 0.15rem;
              margin-left: 0.2rem;
            }
          }
        }

        .main-control {
          width: 2.42rem;
          height: 2.42rem;
          border-radius: 50%;
          background: url('../assets/img/button-bg.png') no-repeat center;
          background-size: 100%;
          align-self: center;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          overflow: hidden;

          .control-btn {
            width: 0.8rem;
            height: 0.8rem;
            user-select: none;
            cursor: pointer;

            .icon-dian {
              width: 0.11rem;
              height: 0.11rem;
            }

            .icon-triangle {
              width: 0.27rem;
            }

            .icon-refresh {
              width: 0.42rem;
            }
          }

          .control-refresh {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .control-triangle {
            display: flex;
            justify-content: center;
            align-items: center;

            &:nth-child(4) {
              transform: rotate(270deg);
            }

            &:nth-child(6) {
              transform: rotate(90deg);
            }

            &:nth-child(8) {
              transform: rotate(180deg);
            }
          }

          .control-dian {
            position: relative;

            .icon-dian {
              position: absolute;
            }

            &:nth-child(1) .icon-dian {
              bottom: 0.18rem;
              right: 0.18rem;
            }

            &:nth-child(3) .icon-dian {
              bottom: 0.18rem;
              left: 0.18rem;
            }

            &:nth-child(7) .icon-dian {
              top: 0.18rem;
              right: 0.18rem;
            }

            &:nth-child(9) .icon-dian {
              left: 0.18rem;
              top: 0.18rem;
            }
          }
        }

        .slider-content {
          width: 100%;
          height: 0.2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0.2rem 0;

          .slider {
            width: 2rem;
            margin: 0 0.15rem;
          }

          .slider-text {
            font-size: 0.18rem;
            color: #817f8b;
          }

          /deep/ .el-slider__button {
            background: #817f8b;
            border: none;
          }

          /deep/ .el-slider__bar {
            background: #817f8b;
          }

          /deep/ .el-slider__runway {
            background: #3b3b3b;
          }
        }

        .capsule-content {
          width: 100%;
          height: 0.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.1rem;

          .capsule-btn {
            width: 0.94rem;
            height: 0.4rem;
            background: url('../assets/img/btn-bg.png') no-repeat center center;
            background-size: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            user-select: none;

            .c-button {
              width: 50%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              > img {
                width: 0.21rem;
              }
            }
          }

        }
      }

      .info-list {
        width: 100%;
        height: calc(100vh - 4.2rem - 0.8rem);
        flex-grow: 1;

        .list-bar {
          width: 100%;
          height: 0.5rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .bar {
            width: 50%;
            height: 100%;
            font-size: 0.18rem;
            color: #817f8b;
            background-color: #393841;
            text-align: center;
            line-height: 0.5rem;
            border-bottom: 0.02rem solid rgba(2, 2, 2, 0);
            user-select: none;
            cursor: pointer;
          }

          .active-list-bar {
            // border-bottom: 0.02rem solid #88888d;
            color: #ffffff;
            background-color: #43424b;
          }
        }
        .pt-20 {
          padding-top: 0.2rem;
        }
        .list-content {
          width: 100%;
          height: 9rem;
          margin-bottom: 1rem;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
          flex-grow: 1;
          /* 设置滚动条的样式 */
          &::-webkit-scrollbar {
            width: 12px;
          }
          /* 滚动槽 */
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
            border-radius: 10px;
          }
          /* 滚动条滑块 */
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
          }
          &::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(255, 0, 0, 0.4);
          }
        }

        .list-item1 {
          width: 100%;
          min-height: 0.6rem;
          padding: 0.06rem;
          border-bottom: 1px #817f8b solid;
          .list-top,
          .list-bom {
            width: 100%;
            height: 0.3rem;
            display: flex;
            line-height: 0.3rem;
            .item-title {
              width: 50%;
              color: #817f8b;
              font-size: 0.15rem;
              &:nth-child(1) {
                width: 62%;
              }
              &:nth-child(2) {
                width: 38%;
              }
            }
          }
        }

        .list-item {
          width: 100%;
          height: 0.3rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.2rem;
          box-sizing: border-box;
          margin-bottom: 0.2rem;

          .item-title {
            color: #817f8b;
            font-size: 0.18rem;
          }

          .operation-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .operation-button {
              height: 0.22rem;

              > img {
                height: 100%;
              }
            }

            .delete-button {
              margin-left: 0.22rem;
            }
          }
        }

        .active-list-item {
          .item-title {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
